<template>
  <div>
    <ocean :use="template" class="theme_box"></ocean>
    <ocean :use="dialog"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { useTableTemplate, useDrawer, useDialog } from '@/ocean';
import { GlobalAPI, UserAPI } from '@/app/api';
import { useMessage } from 'naive-ui'
import { ref } from 'vue';
import examineForm from './form/examine.vue';

type Column = {
  username: "aaaa"
  createTime: "2022-08-31 17:46:10"
  endTime: "23:00:00"
  groupId: 2
  id: 92
  lastLogin: null
  openTime: "16:00:00"
  openingTime: "16:00:00-23:00:00"
  password: null
  phone: "12312312312"
  station: "长宁大1道11"
  status: 1
  storeId: 4
  storeName: "氢氧食品长宁大道店"
  updateTime: null
}

enum Status {
  '正常' = 1,
  '未通过',
}

const message = useMessage()

const dialog = useDialog('注册审核', examineForm);

dialog.button('通过', { type: 'primary' }).click(() => {
  let formRef = dialog.getRef();
  formRef.submit().then((res) => {
    if (res.code) { return message.warning(res.msg) }
    dialog.close();
    template.query();
    message.success('操作成功')
  })
})
dialog.button('取消').click(() => {
  dialog.close();
})

const template = useTableTemplate<Column>('用户注册列表', {
  query: data => UserAPI.queryUserList(data).then(({ data, total }) => {
    template.table.setData(data);
    template.pagination.setCount(total);
  })
});

const storeList = ref([]);
template.form.setModel({ status: 2 });
template.form.item('用户名', 'account').input();
template.form.item('手机号', 'phone').input();
template.form.item('门店', 'storeName').select({ options: storeList, labelField: 'storeName', valueField: 'storeName' });

template.table.column('用户名', 'username');
template.table.column('手机号', 'phone');
template.table.column('门店名称', 'storeName');
template.table.column('站点', 'station');
template.table.column('状态', 'status').enums(Status)
// template.table.column('营业时间', 'openTime');
template.table.column('创建时间', 'createTime');
template.table.define({
  title: '操作',
  render: (row) => (
    <n-space>
      <n-button on-click={() => dialog.open({ row })}>审核</n-button>
    </n-space>
  )
});

template.query()
GlobalAPI.queryAllStoreList().then(data => storeList.value = data);
</script>